<template>
  <div>
    <myheader>

    </myheader>
    <!--面包屑导航-->
    <Breadcrumb :datas="datas">

    </Breadcrumb>
    <section class="featured-block text-center center ">
      <div class="container ">
        <table class="align-items-center">
          <tr>
            <td style="cursor:pointer;">Username:<input type="text" v-model="username"></td>
          </tr>
          <tr>
            <td style="cursor:pointer;">Password:<input type="password" v-model="password"></td>
          </tr>
          <tr>
            <td style="cursor:pointer;">
              <drag-verify :width="width"
                           :height="height"
                           :text="text"
                           ref="Verify">
              </drag-verify>
            </td>
          </tr>
          <tr>
            <td style="cursor:pointer;">
              <Button @click="login">登陆</Button>&nbsp;&nbsp;<Button color="blue" @click="reset">重置</Button>

            </td>
          </tr>
          <tr>
            <td>
              <img src="http://localhost:8000/static/sina.png" alt="微博登陆" style="cursor:pointer" @click='sina'>
              <img src="http://localhost:8000/static/dingding.png" alt="钉钉登陆" style="cursor:pointer" @click='dingding'>
            </td>
          </tr>
        </table>


      </div>
    </section>
    <mytail>

    </mytail>
  </div>
</template>

<script>
  // 导包
  import myheader from './myheader.vue'
  import mytail from "./mytail";
  import dragVerify from 'vue-drag-verify'
  import {config} from "../config.js";

  export default {
    name: "register",
    data() {
      return {
        datas: [
          {'title': '首页', route: {name: 'index'},},
          {'title': '注册页面', route: {name: 'register'}},
          {'title': '登陆页面'}
        ],
        username: '',
        password: '',
        // 滑块验证码
        width: 250,
        height: 30,
        text: '请将滑块拖到最右侧'

      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'mytail': mytail,
      'dragVerify': dragVerify
    },
    methods: {
      // 钉钉
      dingding() {
        window.location.href = config['dingding']
      },
      // 新浪
      sina() {
        window.location.href = config['sina']
      },
      // 注册
      login() {
        console.log(this.$refs.Verify.isPassing);
        if (this.$refs.Verify.isPassing === false) {
          this.$Message('请拖动验证码');
          return false;
        }
        if (this.username === '') {
          return this.$Message('用户名为空')
        }
        if (this.password === '0') {
          return this.$Message('密码为空')
        }
        this.axios.get(config['login'], {
          params: {
            username: this.username,
            password: this.password,
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$Message(res.data.data);
            localStorage.setItem('uid', res.data.uid);
            localStorage.setItem('username', res.data.username);
            localStorage.setItem('jwt', res.data.jwt);
            localStorage.setItem('type',res.data.type);
            this.$router.push('/')
          } else {
            this.$Message(res.data.data)
          }
        })
      },
      // 重置
      reset() {
        this.username = '';
        this.password = '';
      }
    }
  }
</script>

<style scoped>
  .center {
    padding: 70px 50px;
    /*border: 3px solid green;*/
    text-align: center;
  }
</style>
